<template>
  <div class="vue-container">
    <common-detail ref="detail" title="操作日志详情" :fields="fields" :create-form="createForm" :custom-open-fun="customOpenFun">
      <template #requestUrl="{ rows }">
        {{ rows.requestUrl }}
        <el-link
          v-copy:copy="rows.requestUrl"
          v-copy:success="copySuccess"
          type="primary"
          :underline="false"
          style="float: right;"
          icon="el-icon-document-copy"
          title="复制"
        >复制</el-link>
      </template>
      <template #operateStatus="{ rows }">
        <el-tag v-if="rows.operateStatus === 'SUCCESS'" type="success" :size="size">成功</el-tag>
        <el-tag v-if="rows.operateStatus === 'FAIL'" type="danger" :size="size">失败</el-tag>
      </template>
      <template #startTime="{ rows }">
        {{ rows.startTime | formatTime }}
      </template>
      <template #endTime="{ rows }">
        {{ rows.endTime | formatTime }}
      </template>
      <template #handleTime="{ rows }">
        {{ rows.handleTime }}毫秒
      </template>
      <template #requestJson="{ rows }">
        <json-viewer
          :value="rows.requestJson"
          :copyable="copyable"
          preview-mode
          boxed
          sort
        />
      </template>
      <template #responseJson="{ rows }">
        <json-viewer
          :value="rows.responseJson"
          :copyable="copyable"
          preview-mode
          boxed
          sort
        />
      </template>
      <template #errorJson="{ rows }">
        <json-viewer
          :value="rows.errorJson"
          :copyable="copyable"
          preview-mode
          boxed
          sort
        />
      </template>
    </common-detail>
  </div>
</template>
<script>
import JsonViewer from 'vue-json-viewer'
import CommonDetail from '@/components/CommonDetail'
export default {
  name: 'OperationLogDetail',
  components: { JsonViewer, CommonDetail },
  data() {
    return {
      fields: [
        {
          key: 'ip',
          label: '请求IP',
          span: 2
        },
        {
          key: 'requestWay',
          label: '请求方式'
        },
        {
          slot: 'requestUrl',
          label: '请求URL',
          span: 3
        },
        {
          key: 'requestMethod',
          label: '调用方法路径',
          span: 3
        },
        {
          key: 'operateModule',
          label: '操作模块'
        },
        {
          key: 'operateType',
          label: '操作类别'
        },
        {
          slot: 'operateStatus',
          label: '操作状态'
        },
        {
          slot: 'startTime',
          label: '请求开始时间'
        },
        {
          slot: 'endTime',
          label: '请求结束时间'
        },
        {
          slot: 'handleTime',
          label: '处理时间'
        },
        {
          slot: 'requestJson',
          label: '请求参数',
          span: 3
        },
        {
          slot: 'responseJson',
          label: '响应参数',
          span: 3
        },
        {
          slot: 'errorJson',
          label: '错误异常',
          span: 3
        }
      ],
      createForm: {
        requestJson: {},
        responseJson: {},
        errorJson: {}
      },
      copyable: { copyText: '复制', copiedText: '复制成功' }
    }
  },
  computed: {
    size() {
      return this.$store.state.app.size
    }
  },
  methods: {
    // 弹出窗口加载
    openDialog(rows) {
      this.$refs.detail.openDialog(rows)
    },
    // 自定义打开弹窗后操作
    customOpenFun(that) {
      if (that.ruleForm.requestParam) {
        that.ruleForm.requestJson = JSON.parse(that.ruleForm.requestParam)
      }
      if (that.ruleForm.responseParam) {
        that.ruleForm.responseJson = JSON.parse(that.ruleForm.responseParam)
      }
      if (that.ruleForm.errorException) {
        const error = JSON.parse(JSON.stringify({ error: that.ruleForm.errorException }))
        that.ruleForm.errorJson = error
      } else delete that.ruleForm.errorJson
    },
    // 复制成功
    copySuccess() {
      this.$message.success('复制成功')
    }
  }
}
</script>
